import styles from './index.module.less'
import { Tree } from '@terminus/nusi-slim'
import { Thumb, FileFolder } from '@terminus/nusi-slim-icons'
import { useProcessMiningEngineStore } from '../../store'

const ProcessPanel = () => {

	const { setSelectedProcess } = useProcessMiningEngineStore()

	const treeData = [
		{
			title: 'parent 0',
			key: '0-0',
			children: [
				{ title: 'leaf 0-0', key: '0-0-0', isLeaf: true, icon: <Thumb />, content: '<ul><li>文档1</li><li>文档2</li><li>文档3</li></ul>' },
				{ title: 'leaf 0-1', key: '0-0-1', isLeaf: true, icon: <Thumb />, content: '<div>文档0-1</div>' },
			],
		},
		{
			title: 'parent 1',
			key: '0-1',
			children: [
				{ title: 'leaf 1-0', key: '0-1-0', isLeaf: true, icon: <Thumb />, content: '<ul><li>文档1</li><li>文档2</li><li>文档3</li></ul>' },
				{ title: 'leaf 1-1', key: '0-1-1', isLeaf: true, icon: <Thumb />, content: '<div>文档1-1</div>' },
			],
		},
	];

	const handleSelect = (selectedKeys: string[], info: any) => {
		setSelectedProcess(info.node)
	}

	return (
		<div>
			<Tree.DirectoryTree
				icon={({ isLeaf }: { isLeaf: boolean }) => {
					if (isLeaf) {
						return <Thumb />
					}
					return <FileFolder size="16" /> 
				}}
				defaultExpandAll treeData={treeData} onSelect={handleSelect} />
		</div>
	)
}

export default ProcessPanel